我一直很嚮往最佳實踐（Best Practice）這個詞彙，常常在心裡問自己：「如果要達到最佳實踐，該怎麼做？」雖然目前的實力還不足以達到這個目標，尤其在沒有 senior 的環境中有時感覺就像摸黑前進，很難知道問題出在哪裡、該朝什麼方向解決。在這種情況下，尋找好的開源專案成了非常重要的學習途徑，以下是幾個我推薦的資源：

1. 整個專案的最佳實踐

• bulletproof-react Github 傳送門

原本沒想到會找到這麼完整的專案，從專案起步、元件設計、API 串接、到最後部署，竟然非常完整的推薦了各個環節的最佳實踐。而且範例寫的也是十分簡單易懂，想要重頭開始思考最佳實踐的開發者，這個絕對是第一選擇！

列一下他的目錄：

• 💻 Application Overview
• ⚙️ Project Standards
• 🗄️ Project Structure
• 🧱 Components And Styling
• 📡 API Layer
• 🗃️ State Management
• 🧪 Testing
• ⚠️ Error Handling
• 🔐 Security
• 🚄 Performance
• 🌐 Deployment
• 📚 Additional Resources

2. 元件函式庫

• awesome-react-components Github 傳送門
• awesome-react-headless-components Github 傳送門

過往在詢問身邊工作幾年的工程師有什麼推薦的開源專案可以學習時，有被推薦過看 react 或 vercel 開的專案，但到底哪個菜鳥看得懂啊 😂

後來想到像是比較小的套件就是一個很好的參考，那如果想找各個類型的 React 元件，awesome-react-components 真的是有非常多種類～ 如果喜歡 Tailwind 搭配 headless 的人，第二項的 awesome-react-headless-components 是個很棒的參考。

3. 專案推薦

• TanStack Table

這是我最近在看的專案，真的覺得是非常適合作為學習現代前端框架的起點，表格是相當複雜的元件，光是使用與觀察，就能幫助理解如何支援多樣化的樣式，同時練習思考這樣通用的套件如何做到「抽象化」，還有像是 state 與 props 的管理、handler 要怎麼設計、效能處理。

以下是我從官方文件觀察到的：

1. 文件很新也寫得很好，寫得好到甚至超越了套件文件，還提到了許多觀念性的東西。
2. 在 v8 後重新用 Typescript 改寫。
3. 因為是用 Typescript，所以不管你是用 JS 還是 TS 都要好好建立型別來讓表格引用。
4. 在 FAQ 中就有提到如何避免無限重新渲染（React 大坑），告訴你如何使用 useMemo 解決。另外，也有提到其他 React hook 的小技巧。
5. 像是 filtering, sorting, pagination 等章節，都會提到 client side 與 server side 的做法，文件中還分析了該如何挑選XD
6. 在 pagination 的章節，還推薦了可以使用 "virtualization" 或稱 "windowing” 這類型的技術來處理效能問題。
7. 在範例中有出現過 React 18 中的並發模式（Concurrent Mode）和自動批次更新（Automatic Batching）的寫法
8. 跟原本就帶樣式的 Table 套件不同，這樣 headless 的套件真的可以讓你好好思考如何「抽象化」，真心認為這個是合適的最佳實踐參考～

最後想說的話

昨天看到小賴老師的貼文，裡面提到：

「我們大部分的人都是從什麼都不會開始的，這個「不會」包括技術上的不會，也包括學習方法、鑽研能力上的不會，但還好我們總是可以從別人身上學習，從模仿開始，走出自己的一條路來。」

看到真的蠻感動的，或許我們現在仍在摸索當中，但只要不斷從別人身上學習與模仿（身邊沒人至少也可以觀察開源專案），終究能成為自己期望的模樣！